<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Blockly Demo: Maximum Block Limit</title>
    <script src="./node_modules/blockly/blockly_compressed.js"></script>
    <script src="./node_modules/blockly/blocks_compressed.js"></script>
    <script src="./node_modules/blockly/msg/en.js"></script>
    <style>
      body {
        background-color: #fff;
        font-family: sans-serif;
      }
      h1 {
        font-weight: normal;
        font-size: 140%;
      }
      #capacity {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>
      This is a demo of Blockly which has been restricted to a maximum of five
      blocks.
    </p>

    <p>
      <b>You have <span id="capacity"></span> block(s) left.</b>
    </p>

    <div id="blocklyDiv" style="height: 480px; width: 600px"></div>

    <xml
      xmlns="https://developers.google.com/blockly/xml"
      id="toolbox"
      style="display: none">
      <category name="Logic" colour="%{BKY_LOGIC_HUE}">
        <block type="controls_if"></block>
        <block type="logic_compare"></block>
        <block type="logic_operation"></block>
        <block type="logic_negate"></block>
        <block type="logic_boolean"></block>
      </category>
      <category name="Loops" colour="%{BKY_LOOPS_HUE}">
        <block type="controls_repeat_ext">
          <value name="TIMES">
            <block type="math_number">
              <field name="NUM">10</field>
            </block>
          </value>
        </block>
        <block type="controls_whileUntil"></block>
        <block type="controls_for">
          <field name="VAR">i</field>
          <value name="FROM">
            <block type="math_number">
              <field name="NUM">1</field>
            </block>
          </value>
          <value name="TO">
            <block type="math_number">
              <field name="NUM">10</field>
            </block>
          </value>
          <value name="BY">
            <block type="math_number">
              <field name="NUM">1</field>
            </block>
          </value>
        </block>
      </category>
      <category name="Math" colour="%{BKY_MATH_HUE}">
        <block type="math_number">
          <field name="NUM">123</field>
        </block>
        <block type="math_arithmetic"></block>
        <block type="math_single"></block>
      </category>
      <category name="Text" colour="%{BKY_TEXTS_HUE}">
        <block type="text"></block>
        <block type="text_length"></block>
        <block type="text_print"></block>
      </category>
    </xml>

    <script>
      var demoWorkspace = Blockly.inject('blocklyDiv', {
        media: './node_modules/blockly/media/',
        maxBlocks: 5,
        toolbox: document.getElementById('toolbox'),
      });

      function onchange(event) {
        document.getElementById('capacity').textContent =
          demoWorkspace.remainingCapacity();
      }

      demoWorkspace.addChangeListener(onchange);
      onchange();
    </script>
  </body>
</html>
